<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>${constants.getSystemName()}</title>
    <link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}"/>
    <style>
        .numberInfoSubTitle {
            color: rgba(0, 0, 0, .45);
            font-size: 14px;
            height: 22px;
            line-height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
        }

        .numberInfoValue {
            color: rgba(0, 0, 0, .85);
            font-size: 24px;
            margin-top: 10px;
            height: 32px;
            line-height: 32px;
        }

        .numberInfoSuffix {
            color: rgba(0, 0, 0, .65);
            font-size: 16px;
            font-style: normal;
            margin-left: 4px;
            line-height: 32px;
        }
    </style>
</head>

<body>

<!-- 加载动画，移除位置在common.js中 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">


        <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-brief" lay-filter="tabZZT">
                        <ul class="layui-tab-title">
                            <li class="layui-this">物料统计</li>
                            <li>产品统计</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <div class="layui-row layui-col-space30">
                                    <div class="layui-col-xs12 layui-col-md12">
                                        <div id="xse" style="height: 300px;margin-top: 20px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <div class="layui-row layui-col-space30">
                                    <div class="layui-col-xs12 layui-col-md12">
                                        <div id="fwl" style="height: 300px;margin-top: 20px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

<!-- js部分 -->
@/* 加入contextPath属性和session超时的配置 */
<script type="text/javascript">
    var Feng = {
        ctxPath: "${ctxPath}",
        version: '${constants.getReleaseVersion()}'
    };
</script>

<script type="text/javascript"
        src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
<script src="${ctxPath}/assets/common/libs/echarts/echarts.min.js?v=${constants.getReleaseVersion()}"></script>
<script src="${ctxPath}/assets/common/libs/echarts/echartsTheme.js?v=${constants.getReleaseVersion()}"></script>

<script>
    layui.use(['layer', 'element','ax'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var $ax = layui.ax;

        var materielCharts = echarts.init(document.getElementById('xse'), myEchartsTheme);
        var productCharts = echarts.init(document.getElementById('fwl'), myEchartsTheme);
        //data
        var materielStat = {};
        var productStat = {};
        //ajax
        loadMateriel();
        function loadMateriel() {
            var ajax = new $ax(Feng.ctxPath + "/api/materiel/stat", function (data) {
                materielStat = data;
                loadMaterielChart();
             }, function (data) {
                loadMaterielChart();
            });
            // ajax.set("userId", userId);
            ajax.start();
        }

        function loadMaterielChart() {

            // 渲染销售额图表
            var xAxis =  materielStat.xAxis;
            var seriesData = materielStat.seriesDatas;
            var option3 = {
                title: {
                    text: '物料数量统计',
                    textStyle: {
                        color: '#000',
                        fontSize: 14
                    }
                },
                tooltip: {},
                grid: {
                    left: '0',
                    right: '0',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: {
                    data: xAxis
                },
                yAxis: {},
                series: [{
                    type: 'bar',
                    data: seriesData,
                    barMaxWidth: 45
                }]
            };
            materielCharts.setOption(option3);
        }




        // 渲染产品图表

        //ajax
        loadProduct();
        function loadProduct() {
            var ajax = new $ax(Feng.ctxPath + "/api/product/stat", function (data) {
                productStat = data;
                loadProductChart();
            }, function (data) {
                loadProductChart();
            });
            // ajax.set("userId", userId);
            ajax.start();
        }

        function loadProductChart() {

            var xAxis =  productStat.xAxis;
            var seriesData = productStat.seriesDatas;
            var option4 = {
                title: {
                    text: '产品数量统计',
                    textStyle: {
                        color: '#000',
                        fontSize: 14
                    }
                },
                tooltip: {},
                grid: {
                    left: '0',
                    right: '0',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: {
                    data: xAxis
                },
                yAxis: {},
                series: [{
                    type: 'bar',
                    data: seriesData,
                    barMaxWidth: 45
                }]
            };
            productCharts.setOption(option4);
        }


        // 切换选项卡重新渲染
        element.on('tab(tabZZT)', function (data) {
            if (data.index == 0) {
                materielCharts.resize();
            } else {
                productCharts.resize();
            }
        });

        // 窗口大小改变事件
        window.onresize = function () {
            materielCharts.resize();
            productCharts.resize();
        };

    });
</script>
</body>

</html>